<template>
  <div class="container">
    <div class="navTab">
      <div class="tab reserBill">
        <span :class="{'active':active_r}"
              @click="reserBillClik">预约单</span>
      </div>
      <div class="tab objBill">
        <span :class="{'active':active_o}"
              @click="objBillClik">项目单</span>
      </div>
    </div>
    <!-- 预约单tab -->
    <div class="main resMain"
         :class="{'show':active_r}">
      <!-- 未实名认证页 -->
      <div class="tabcon userNull"
           :class="{'show':resListOrResNull=='resUserShow'}">
        <p class="text">做个实名认证就可以查看啦~</p>
        <button id='btn'
                @click="gotoCertification">点击进入实名认证</button>
      </div>
      <!-- 预约单空页面 -->
      <div class="tabcon reserNull"
           :class="{'show':resListOrResNull=='resNullShow'}">
        <p class="text">您还没有预约单呢，快预约一个变美吧~</p>
      </div>
      <!-- 预约单列表页 -->
      <div class="tabcon reserList"
           :class="{'show':resListOrResNull=='resListShow'}">
        <scroll-view :scroll-y='true'
                     :style="{'height': '100%'}"
                     @scrolltolower="pullrefresh('1')">
          <ul>
            <li v-for="(item,index) in dataList_res"
                :key="index"
                @click="gotoReserMore(item)">
              <div class="datebox">
                <p>{{item.month}}</p>
                <p>{{item.day}}</p>
              </div>
              <div class="contentbox">
                <div class="top-box">
                  <div class="left">
                    <img :src="ImgBaseUrl+item.project_image"
                         alt="">
                  </div>
                  <div class="right">
                    <p class="p1">{{item.project_name}}</p>
                    <p class="p2">{{item.hospital_name}}</p>
                  </div>
                </div>
                <div class="bottom-box">
                  <p class="p1">预约编号：{{item.order_sn}}</p>
                  <p class="p2">
                    <span class="s1"
                          v-if="item.order_status=='1'">正在预约</span>
                    <span class="s1"
                          v-if="item.order_status=='2'">关闭预约</span>
                    <span class="s2"
                          v-if="item.order_status=='2'">
                      <i @click.stop="gotoEvaluateBooking(item)"
                         v-if="item.comment_status=='1'"><img src="https://h5.ameimeika.com/mp_images/mp_1.1/pinglun@2x.png"
                             alt=""></i>
                      <i @click.stop="delReserData(item,index)"><img src="https://h5.ameimeika.com/mp_images/mp_1.1/shanchu@2x.png"
                             alt=""></i>
                    </span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </scroll-view>
      </div>
    </div>
    <!-- 项目单tab -->
    <div class="main objMain"
         :class="{'show':active_o}">
      <!-- 项目单空页面 -->
      <div class="tabcon subsidyNull"
           :class="{'show':objListOrObjNull=='objNullShow'}">
        <p class="text">您还没有补贴单呢~做了项目就快告诉我们吧~</p>
      </div>
      <!-- 项目单列表页 -->
      <div class="tabcon subsidyList"
           :class="{'show':objListOrObjNull=='objListShow'}">
        <scroll-view :scroll-y='true'
                     :style="{'height': '100%'}"
                     @scrolltolower="pullrefresh('2')">
          <ul>
            <li v-for="(item,index) in dataList_obj"
                :key="index"
                @click="gotoObjMore(item)">
              <div class="contentbox">
                <div class="top-box">
                  <p class="p1">
                    <span class="s1">项目编号：{{item.order_sn}}</span>
                    <span class="s2">{{item.new_status}}</span>
                  </p>
                </div>
                <div class="center-box"
                     :class="{'borbtom':item.allowance_money!='0'}">
                  <div class="left">
                    <img :src="ImgBaseUrl+item.project_image"
                         alt="">
                  </div>
                  <div class="right">
                    <p class="p1">{{item.project_name}}</p>
                    <p class="p2">
                      <span class="s1">{{item.hospital_name}}</span>
                      <span class="pinlun-box"
                            @click="gotoEvaluateSubsidy(item)"
                            v-if="item.comment_status=='0'">
                        <i class="msg"><img :src="iconImgUrl+'mp_1.1/pinglun@2x.png'"
                               alt=""></i>
                      </span>
                    </p>
                  </div>
                </div>
                <div class="bottom-box"
                     v-if="item.allowance_money!='0' &&item.all_credit!== 0">
                  <p class="p1">
                    <span class="s1">补贴总额1</span>
                    <span class="s2">积分</span>
                    <span class="s3">{{item.all_credit}}</span>
                    <span class="s4"
                          v-if="item.coin!='0'">(含可提现{{item.coin}})</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </scroll-view>
      </div>
    </div>
    <!-- </div> -->
    <!-- 预约单tab -->
    <div class="main resMain"
         :class="{'show':active_r}">
      <!-- 未实名认证页 -->
      <div class="tabcon userNull"
           :class="{'show':resListOrResNull=='resUserShow'}">
        <p class="text">做个实名认证就可以查看啦~</p>
        <button id='btn'
                @click="gotoCertification">点击进入实名认证</button>
      </div>
      <!-- 预约单空页面 -->
      <div class="tabcon reserNull"
           :class="{'show':resListOrResNull=='resNullShow'}">
        <p class="text">您还没有预约单呢，快预约一个变美吧~</p>
      </div>
      <!-- 预约单列表页 -->
      <div class="tabcon reserList"
           :class="{'show':resListOrResNull=='resListShow'}">
        <scroll-view :scroll-y='true'
                     :style="{'height': '100%'}"
                     @scrolltolower="pullrefresh('1')">
          <ul>
            <li v-for="(item,index) in dataList_res"
                :key="index">
              <div class="datebox">
                <p>{{item.month}}</p>
                <p>{{item.day}}</p>
              </div>
              <div class="contentbox">
                <div class="top-box">
                  <div class="left">
                    <img :src="ImgBaseUrl+item.project_image"
                         alt="">
                  </div>
                  <div class="right"
                       @click="gotoReserMore(item)">
                    <p class="p1">{{item.project_name}}</p>
                    <p class="p2">{{item.hospital_name}}</p>
                  </div>
                </div>
                <div class="bottom-box">
                  <p class="p1">预约编号：{{item.order_sn}}</p>
                  <p class="p2">
                    <span class="s1"
                          v-if="item.order_status=='1'">正在预约</span>
                    <span class="s1"
                          v-if="item.order_status=='2'">关闭预约</span>
                    <span class="s2"
                          v-if="item.order_status=='2'">
                      <i @click.stop="gotoEvaluateBooking(item)"
                         v-if="item.comment_status=='1'"><img src="https://h5.ameimeika.com/mp_images/mp_1.1/pinglun@2x.png"
                             alt=""></i>
                      <i @click.stop="delReserData(item,index)"><img src="https://h5.ameimeika.com/mp_images/mp_1.1/shanchu@2x.png"
                             alt=""></i>
                    </span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </scroll-view>
      </div>
    </div>
    <!-- 项目单tab -->
    <div class="main objMain"
         :class="{'show':active_o}">
      <!-- 项目单空页面 -->
      <div class="tabcon subsidyNull"
           :class="{'show':objListOrObjNull=='objNullShow'}">
        <p class="text">您还没有补贴单呢~做了项目就快告诉我们吧~</p>
      </div>
      <!-- 项目单列表页 -->
      <div class="tabcon subsidyList"
           :class="{'show':objListOrObjNull=='objListShow'}">
        <scroll-view :scroll-y='true'
                     :style="{'height': '100%'}"
                     @scrolltolower="pullrefresh('2')">
          <ul>
            <li v-for="(item,index) in dataList_obj"
                :key="index">
              <div class="contentbox">
                <div class="top-box">
                  <p class="p1">
                    <span class="s1">项目编号：{{item.order_sn}}</span>
                    <span class="s2"> {{item.new_status}}</span>
                    <!-- <span class="s2" v-if="item.already_num ==36">补贴成功</span> -->
                  </p>
                </div>
                <div class="center-box"
                     :class="{'borbtom':item.allowance_money!='0'}">
                  <div class="left">
                    <img :src="ImgBaseUrl+item.project_image"
                         alt="">
                  </div>
                  <div class="right">
                    <p class="p1"
                       @click="gotoObjMore(item)">{{item.project_name}}</p>
                    <p class="p2">
                      <span class="s1">{{item.hospital_name}}</span>
                      <span class="pinlun-box"
                            @click="gotoEvaluateSubsidy(item)"
                            v-if="item.comment_status=='0'">
                        <i class="msg"><img :src="iconImgUrl+'mp_1.1/pinglun@2x.png'"
                               alt=""></i>
                      </span>
                    </p>
                  </div>
                </div>
                <div class="bottom-box"
                     v-if="item.allowance_money!='0' && item.all_credit!== 0">
                  <p class="p1">
                    <span class="s1">补贴总额</span>
                    <span class="s2">积分</span>
                    <span class="s3">{{item.all_credit}}</span>
                    <span class="s4"
                          v-if="item.coin!='0'">(含可提现{{item.coin}})</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      // ----------------------正式数据--------------------------
      iconImgUrl: "https://h5.ameimeika.com/mp_images/",
      ImgBaseUrl: "https://img.ameimeika.com/",
      //tab切换
      active_r: true,
      active_o: false,
      //   active_r: false,
      //   active_o: true,
      borbtom: false,
      //预约单和项目单的分页参数
      page_r: 1,
      page_o: 1,
      pageSize: 4,
      //预约列表数据和项目单列表数据
      dataList_res: [],
      dataList_obj: [],
      //1.实名认证页面表2.预约单列3.空页面切换开关:resUserShow resListShow resNullShow
      resListOrResNull: "resNullShow",
      //项目单列表和空页面切换开关:  objListShow  objNullShow
      objListOrObjNull: "objNullShow",
      //停止上拉加载开关
      stopLoadFlag_r: true,
      stopLoadFlag_o: true
    };
  },
  methods: {
    //获取预约单列表数据
    getReserData () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post("api/v4_2/order_project/appoint_index", {
        page: this.page_r,
        pageSize: this.pageSize
      }, result => {
        let res = result.data;
        //如果没有实名认证
        if (res.status_code == "2040") {
          this.resListOrResNull = "resUserShow";
          wx.hideLoading();
          return;
        }
        if (res.status_code == "0") {
          wx.hideLoading();
          //第一次加载如果预约单数据为空显示空页面
          if (res.data.data.length == 0 && this.page_r == 1) {
            this.resListOrResNull = "resNullShow";
          } else {
            //显示列表页面
            this.resListOrResNull = "resListShow";
            if (res.data.data.length > 0 && this.page_r == 1) {
              this.dataList_res = res.data.data;
              // this.parsing(this.dataList_res);
              for (let i = 0; i < this.dataList_res.length; i++) {
                let date = new Date(
                  parseFloat(this.dataList_res[i].created_at * 1000)
                );
                let M =
                  (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "月";
                let D = date.getDate() + "日";
                this.dataList_res[i].month = M;
                this.dataList_res[i].day = D;
              }
            } else if (res.data.data.length > 0 && this.page_r > 1) {
              let dataList = res.data.data;
              // this.parsing(dataList);
              for (let i = 0; i < dataList.length; i++) {
                let date = new Date(parseFloat(dataList[i].created_at * 1000));
                let M =
                  (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "月";
                let D = date.getDate() + "日";
                dataList[i].month = M;
                dataList[i].day = D;
              }
              this.dataList_res.push(...dataList);
            } else if (res.data.data.length == 0 && this.page_r > 1) {
              this.stopLoadFlag_r = false;
              return false;
            }
          }
        } else if (res.status_code == 1009) {
          wx.showToast({
            title: "请点击-我的-进行登录", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        } else {
          wx.hideLoading();
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
          return false;
        }
      })

    },
    //获取项目单列表数据
    getObjData () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post("api/v4_2/order_project/subsidy_index", {
        page: this.page_o,
        pageSize: this.pageSize
      }, result => {
        wx.hideLoading();
        let res = result.data;
        if (res.status_code == "0") {
          if (res.data.data.length == 0 && this.page_o == 1) {
            //第一次加载如果没有数据显示空页面
            this.objListOrObjNull = "objNullShow";
          } else {
            //显示列表页面
            this.objListOrObjNull = "objListShow";
            // 上拉加载代码
            if (res.data.data.length > 0 && this.page_o == 1) {
              this.dataList_obj = res.data.data;
            } else if (res.data.data.length > 0 && this.page_o > 1) {
              let dataList = res.data.data;
              this.dataList_obj.push(...dataList);
            } else if (res.data.data.length == 0 && this.page_o > 1) {
              this.stopLoadFlag_o = false;
              return false;
            }
          }
        } else if (res.status_code == 1009) {
          wx.showToast({
            title: "请点击-我的-进行登录", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        } else {
          wx.hideLoading();
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
          return false;
        }
      })
    },
    //预约单
    reserBillClik () {
      wx.setStorageSync('project_order', 'resListShow')
      this.active_r = true;
      this.active_o = false;
      // this.getReserData();
    },
    //项目单
    objBillClik () {
      wx.setStorageSync('project_order', 'objListShow')
      this.active_r = false;
      this.active_o = true;
      // this.getObjData();
    },
    //跳转实名认证页面
    gotoCertification () {
      //2040
      wx.navigateTo({
        url: "/pages/package_mine/identification/main"
      });
    },
    //预约单跳转评论页面
    gotoEvaluateBooking (item) {
      wx.navigateTo({
        url: `/pages/package_projects/evaluation_booking/main?id=${item.id}`
      });
    },
    //项目单跳转评论页面
    gotoEvaluateSubsidy (item) {
      wx.navigateTo({
        url: `/pages/package_projects/evaluation_subsidy/main?id=${item.id}`
      });
    },

    //删除预约关闭记录
    delReserData (item, index) {
      wx.showModal({
        title: "确认删除预约单?", //提示的标题,
        content: "删除的预约单将无法恢复", //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#444444", //取消按钮的文字颜色,
        confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#F64665", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            wx.showLoading({
              title: "加载中",
              mask: true
            });
            common.fly_post("api/v4_2/order_project/appoint_del", {
              id: item.id
            }, result => {
              let res = result.data;
              if (res.status_code == 0) {
                wx.hideLoading();
                this.dataList_res.splice(index, 1);
              } else if (res.status_code == 1009) {
                wx.showToast({
                  title: "请点击-我的-进行登录", //提示的内容,
                  icon: "none", //图标,
                  duration: 1500, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => { }
                });
              } else {
                wx.hideLoading();
                wx.showToast({
                  title: res.message,
                  icon: "none",
                  duration: 2000,
                  mask: true
                });
                return false;
              }
            })
          }
        }
      });
    },
    //跳转预约详情页
    gotoReserMore (item) {
      wx.navigateTo({
        url: `/pages/package_projects/yy_order_detail/main?str=${item.id}`
      });
    },
    //跳转项目单详情页
    gotoObjMore (item) {
      wx.navigateTo({
        url: `/pages/package_projects/bt_order_detail/main?str=${item.id}`
      });
    },
    //上拉加载
    pullrefresh (flagNum) {
      if (this.stopLoadFlag_r && flagNum == "1") {
        this.page_r++;
        this.getReserData();
      } else if (!this.stopLoadFlag_r && flagNum == "1") {
        wx.showToast({
          title: "已经到最底下了^_^",
          icon: "none",
          duration: 1000,
          mask: true
        });
      }
      if (this.stopLoadFlag_o && flagNum == "2") {
        this.page_o++;
        this.getObjData();
      } else if (!this.stopLoadFlag_o && flagNum == "2") {
        wx.showToast({
          title: "已经到最底下了^_^",
          icon: "none",
          duration: 1000,
          mask: true
        });
      }
    },
    //解析数据
    parsing (dataList) {
      for (let i = 0; i < this.dataList.length; i++) {
        let date = new Date(parseFloat(this.dataList[i].created_at));
        let M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "月";
        let D = date.getDate() + "日";
        this.dataList[i].month = M;
        this.dataList[i].day = D;
      }
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "预约补贴单"
    });
    //首次加载
    Object.assign(this.$data, this.$options.data());
    //跳转到本页面的参数
    if (options.showName == "resListShow") {
      wx.setStorageSync('project_order', 'resListShow')
      //预约单
      this.active_r = true;
      this.active_o = false;
    } else if (options.showName == "objListShow") {
      wx.setStorageSync('project_order', 'objListShow')
      //项目单
      this.active_r = false;
      this.active_o = true;
    }
    this.stopLoadFlag_r = true;
    this.stopLoadFlag_o = true;
    this.page_r = 1;
    this.page_o = 1;
    this.getReserData();
    this.getObjData();
  },
  onShow (options) {
    Object.assign(this.$data, this.$options.data());
    if (wx.getStorageSync('project_order') == 'resListShow') {
      this.active_r = true;
      this.active_o = false;
    } else {
      this.active_r = false;
      this.active_o = true;
    }
    this.getReserData();
    this.getObjData();

  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.wh() {
  width: 100%;
  height: 100%;
}

.bd() {
  border: 1px solid red;
}

.bg() {
  background: #888888;
}

.text() {
  position: relative;
  height: 20px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: center;
  top: 226px;
}
.hidden {
  display: none;
}

.container {
  width: 100%;
  height: 100%;
  background: #fbfbfb;
  position: relative;
  .navTab {
    // position: fixed;
    height: 44px;
    width: 100%;
    display: flex;
    color: #888888;
    background: #fff;
    top: 0px;

    .tab {
      flex: 1;
      // border: 1px solid red;
      box-sizing: border-box;
      &.reserBill {
        text-align: right;
        padding-right: 20px;
      }
      &.objBill {
        text-align: left;
        padding-left: 20px;
      }

      span {
        display: inline-block;
        height: 96%;
        line-height: 44px;
        font-size: 14px;
        &.active {
          color: #f64665;
          border-bottom: 2px solid #f64665;
          font-weight: bold;
        }
      }
    }
  }
  .main {
    position: relative;
    height: 87%;
    width: 100%;
    display: none;

    &.show {
      display: block;
    }
    .tabcon {
      display: none;
      &.show {
        display: block;
      }
    }
    //预约单tab
    .userNull {
      position: relative;
      .wh;
      background: url("https://h5.ameimeika.com/mp_images/mp_1.1/Group 2@2x.png")
        no-repeat center 108px;
      background-size: 36% 22%;
      .text {
        .text;
      }
      #btn {
        position: relative;
        width: 285px;
        height: 44px;
        background: linear-gradient(
          180deg,
          rgba(255, 152, 170, 1) 0%,
          rgba(246, 70, 101, 1) 100%
        );
        box-shadow: 0px 4px 6px 0px rgba(255, 133, 154, 0.78);
        font-size: 17px;
        color: #fff;
        border-radius: 20px;
        top: 290px;
      }
    }
    .reserNull {
      .wh;
      position: relative;
      background: url("https://h5.ameimeika.com/mp_images/mp_1.1/booking@2x.png")
        no-repeat center 108px;
      background-size: 36% 22%;
      .text {
        .text;
      }
    }
    .reserList {
      .wh;
      position: absolute;
      box-sizing: border-box;
      padding: 10px 15px;
      overflow: auto;
      ul {
        .wh;
        li {
          // .bd;
          display: flex;
          margin-bottom: 10px;
          .datebox {
            flex: 1;
            p {
              text-align: center;
              font-size: 12px;
              color: #666666;
              &:nth-child(1) {
                font-size: 14px;
                font-weight: bold;
                color: #444444;
                line-height: 20px;
              }
            }
          }
          .contentbox {
            flex: 6;
            background: #fff;
            box-sizing: border-box;
            padding: 10px;
            .top-box {
              height: 60px;
              .left {
                float: left;
                width: 60px;
                height: 60px;
                img {
                  .wh;
                }
              }
              .right {
                position: relative;
                float: right;
                width: 210px;
                height: 100%;
                p {
                  &.p1 {
                    font-size: 14px;
                    font-weight: bold;
                    color: #444444;
                    min-height: 40px;
                    line-height: 20px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }
                  &.p2 {
                    position: relative;
                    font-size: 12px;
                    color: #999999;
                    left: 0;
                    bottom: 0;
                    height: 15px;
                    padding-top: 5px;
                  }
                }
              }
            }
            .bottom-box {
              .p1 {
                height: 17px;
                font-size: 12px;
                color: #666666;
                line-height: 17px;
                margin-top: 10px;
              }
              .p2 {
                margin-top: 10px;
                span {
                  display: inline-block;
                }
                .s1 {
                  font-size: 14px;
                  font-weight: bold;
                  color: #f64665;
                }
                .s2 {
                  float: right;
                  position: relative;
                  i {
                    position: relative;
                    top: 1px;
                    display: inline-block;
                    width: 16px;
                    height: 15px;
                    img {
                      .wh;
                    }
                    &:nth-child(2) {
                      margin-left: 15px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    // 项目单tab
    .subsidyNull {
      .wh;
      position: relative;
      background: url("https://h5.ameimeika.com/mp_images/mp_1.1/project_order_empty.png")
        no-repeat center 108px;
      background-size: 36% 22%;
      .text {
        .text;
      }
    }
    .subsidyList {
      .wh;
      position: relative;
      box-sizing: border-box;
      overflow: auto;
      padding-top: 10px;
      margin-bottom: 50px;
      ul {
        .wh;
        li {
          box-sizing: border-box;
          padding: 0 5px;
          background: #fff;
          margin-bottom: 10px;
          .contentbox {
            box-sizing: border-box;
            padding-left: 10px;
            padding-top: 10px;
            width: 100%;
            .top-box {
              .p1 {
                margin-bottom: 10px;
                .s1 {
                  font-size: 12px;
                  color: #666666;
                }
                .s2 {
                  float: right;
                  color: #f64665;
                  font-size: 12px;
                  font-weight: bold;
                  margin-right: 10px;
                }
              }
            }
            .center-box {
              height: 80px;
              padding-bottom: 10px;
              &.borbtom {
                //   .bd;
                border-bottom: 1px solid #e0e0e0;
              }
              .left {
                float: left;
                width: 80px;
                height: 80px;
                img {
                  .wh;
                }
              }
              .right {
                position: relative;
                float: right;
                width: 260px;
                height: 100%;
                // .bd;
                p {
                  &.p1 {
                    font-size: 14px;
                    font-weight: bold;
                    color: #444444;
                    line-height: 20px;
                    box-sizing: border-box;
                    padding-right: 10px;
                    min-height: 40px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }
                  &.p2 {
                    // border:1px solid blue;
                    position: relative;
                    font-size: 12px;
                    color: #999999;
                    left: 0;
                    bottom: -10px;
                    height: 30px;
                    .s1 {
                      // .bd;
                      display: inline-block;
                      position: relative;
                      top: 12px;
                    }
                    .pinlun-box {
                      // .bd;
                      display: inline-block;
                      position: relative;

                      width: 30px;
                      height: 30px;
                      // padding-top: 15px;
                      // .bd;
                      float: right;
                      i {
                        display: inline-block;
                        position: relative;
                        top: 12px;
                        width: 16px;
                        height: 15px;
                        img {
                          .wh;
                        }
                      }
                    }
                    .msg {
                      margin-right: 10px;
                    }
                    // .del{
                    //     margin-left:5px;
                    //     margin-right: 10px;
                    // }
                  }
                }
              }
            }
            .bottom-box {
              border: 1px solid #fff;
              // .bd;
              .p1 {
                height: 17px;
                font-size: 12px;
                color: #666666;
                line-height: 17px;
                margin: 8px 0;
                .s1 {
                  color: #444444;
                  font-weight: bold;
                  margin-right: 10px;
                }
                .s2 {
                  color: #ff7100;
                  font-size: 10px;
                }
                .s3 {
                  color: #ff7100;
                  font-weight: bold;
                  font-size: 14px;
                  padding: 0 3px;
                  top: 5rpx;
                  position: relative;
                }
                .s4 {
                  color: #666666;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>


